عرض سريع الاستجابة باستخدام wordcloud2.js (عنصر html5 في اللوحة القماشية)

StackOverflow https://stackoverflow.com//questions/25079736

سؤال

مع wordcloud2.js يمكنك إنشاء سحابة كلمات جميلة وسهلة على عناصر قماش.ليس لدي مشاكل حقًا مع هذا البرنامج النصي، في الواقع فقط مع عنصر اللوحة القماشية بشكل عام:أرغب في الحصول على عرض سريع الاستجابة (في هذه الحالة يتعلق بعرض المتصفح).

يُظهر العرض الصحيح (100%)، ولكن تمت ترقية اللوحة القماشية و"الصورة" مشوهة.إذا قمت بحفظ "png" فستحصل على الدقة القديمة/الأساسية التي قدمها البرنامج النصي.

كيف تصلحها؟

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas</title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<script src="js/wordcloud2.js"></script>

<style type="text/css">    
#canvas_cloud{
width: 100%;
height:500px;
}
</style>

</head>

<body>

<canvas id="canvas_cloud"></canvas>

<script>

var options = 
{
  list : [ 
  ["Pear", "9"],
  ["Grape", "3"],
  ["Pineapple", "8"], 
  ["Apple", "5"]
  ],
  gridSize: Math.round(16 * document.getElementById('canvas_cloud').offsetWidth / 1024),
  weightFactor: function (size) {
    return Math.pow(size, 1.9) * document.getElementById('canvas_cloud').offsetWidth / 1024;
  }
}

WordCloud(document.getElementById('canvas_cloud'), options); 

</script>

</body>
</html>
هل كانت مفيدة؟

المحلول

حصلت عليه!Sourround The Canvas مع << قوي> DIV > عنصر، والذي هو 100٪ واسعة ولديه معرف "sourrounding_div".

giveacodicetagpre.

في << قوي> البرنامج النصي > إضافة قبل var :

giveacodicetagpre.

هذا كل شيء: -)

نصائح أخرى

<canvas> هي عبارة عن "قماش" نقطي، فقط فكر في الأمر على أنه عادي <img> لجافا سكريبت لرسم وحدات البكسل.لا يمكنك جعلها "مستجيبة" تمامًا كما لا يمكنك جعل الأشياء على الصورة مستجيبة بدون استبدال الصورة.

ومع ذلك، فقد قمت بتنفيذ ميزة تجريبية تستخدم ملف <div> كـ "لوحة قماشية" وارسم النص بها <span>س.لا تزال في موضعها المطلق، ولكن إذا كنت تريد كتابة JavaScript إضافيًا لتحريكها عند تغيير حجم النافذة، فقد تتمكن من تحقيق تأثير الاستجابة الذي تريده.

حظ سعيد!

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top